<template>
  <div class="welcome">
    <el-row :gutter="20">
      <el-col :span="18">
        <div class="grid-content">
          <el-row :gutter="20" style="margin-bottom: 20px">
            <el-col :span="6">
              <div style="height: 80px; background: lightblue"></div>
            </el-col>
            <el-col :span="6">
              <div style="height: 80px; background: lightblue"></div>
            </el-col>
            <el-col :span="6">
              <div style="height: 80px; background: lightblue"></div>
            </el-col>
            <el-col :span="6">
              <div style="height: 80px; background: lightblue"></div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <div style="height: 180px; background: lightblue"></div>
            </el-col>
            <el-col :span="12">
              <div style="height: 180px; background: lightblue"></div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content">
          <div
            style="
              width: 100%;
              height: 208px;
              background-color: blueviolet;
              margin-bottom: 20px;
            "
          ></div>
          <div
            style="
              width: 100%;
              height: 253px;
              background-color: blueviolet;
              margin-bottom: 20px;
            "
          ></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="less">
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
